<template>
  <div class="view-container">
    <div class="main-content">
      <div class="list-container" style="padding-top: 0">
        <div class="my-tabs-container">
          <div class="my-tabs">
            <el-tabs v-model="activeName" style="width:100%" @tab-click="handleClick">
              <el-tab-pane label="企业代理" name="enterprise" />
              <el-tab-pane label="兼职大包" name="partTime" />
            </el-tabs>
            <el-button class="main-btn" v-auth="{v:['crm:editorial:enterprise:create'],bool:activeName === 'enterprise'}"
              size="small" type="primary" @click="handlNew">
              推荐代理
            </el-button>
            <el-button class="main-btn" v-auth="{v:['crm:editorial:partTime:create'],bool:activeName === 'partTime'}"
              size="small" type="primary" @click="handlNew">
              推荐兼职
            </el-button>
          </div>
        </div>

        <component :is="activeName" ref="refComponent" />
      </div>

    </div>
  </div>
</template>

<script>
import {defineAsyncComponent, getCurrentInstance, inject, reactive, toRefs,} from "vue";
import {useRouter} from "vue-router";

export default {
  name: "Index",
  components: {
    enterprise: defineAsyncComponent(() => import("../modules/enterprise.vue")),
    partTime: defineAsyncComponent(() => import("../modules/partTime.vue")),
  },
  setup() {
    const api = inject("api");
    const currentInstance = getCurrentInstance();
    const router = useRouter();
    const data = reactive({
      activeName: "enterprise",
      refComponent: null,
      type: "agent",
    });
    const handlNew = () => {
      if (data.activeName === "enterprise") {
        data.type = "agent";
      }
      if (data.activeName === "partTime") {
        data.type = "agent_person";
      }
      router.push({
        path: "/editorial/advanceAgent/create",
        query: { type: data.type },
      });
    };

    return {
      ...toRefs(data),
      handlNew,
    };
  },
};
</script>

<style scoped>
/* @import url(); 引入css类 */
</style>
